<%--
  Created by IntelliJ IDEA.
  User: 蒋丽娟
  Date: 2019/5/21
  Time: 20:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${path}/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${path}/layuiadmin/style/admin.css" media="all">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>

<body>
<!-- 增加商品图片-->
    <form class="layui-form" action="" lay-filter="example">
        <div class="layui-form-item">
            <label class="layui-form-label" >商品名</label>
            <div class="layui-input-inline">
                <select name="goodsname" id="goodsNameSelect" lay-filter="select1">
                    <option value="0" selected="">请选择</option>
                    <c:forEach items="${list}" var="e">
                    <option value="${e.goodsid}" >${e.goodsname}</option>
                    </c:forEach>
                </select>
            </div>
        </div>

        <div class="layui-upload">
            <button type="button" class="layui-btn" id="ifcoverbtn">上传商品封面</button>
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="ifcover">
                <p id="ifcoverText"></p>
            </div>
        </div>
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="goods1btn">上传图片1</button>
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="goods1">
                <p id="goods1Text"></p>
            </div>
        </div>
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="goods2btn">上传图片2</button>
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="goods2">
                <p id="goods2Text"></p>
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="addGoods">立即提交</button>
            </div>
        </div>
    </form>



<script src="${path}/layuiadmin/layui/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<script>
    layui.use(['table','upload','form'], function() {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery
            ,upload = layui.upload;
        var cover,goods1,goods2;
        //普通图片上传
        var uploadInst1 = upload.render({
            elem: '#ifcoverbtn'
            ,url: 'uploadPicture'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#ifcover').attr('src', result); //图片链接（base64）

                });
            }
            ,done: function(res){
                //如果上传失败
                cover=res.data.src;
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var ifcoverText = $('#ifcoverText');
                ifcoverText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                ifcoverText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });
        //普通图片上传
        var uploadInst2 = upload.render({
            elem: '#goods1btn'
            ,url: 'uploadPicture'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#goods1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                goods1=res.data.src;
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var goods1Text = $('#goods1Text');
                goods1Text.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                goods1Text.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });
        //普通图片上传
        var uploadInst3= upload.render({
            elem: '#goods2btn'
            ,url: 'uploadPicture'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#goods2').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                goods2=res.data.src;
                //如果上传失败
                if(res.code > 0){

                    return layer.msg('上传失败');
                }
                //上传成功
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var goods2Text = $('#goods2Text');
                goods2Text.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                goods2Text.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });
        //监听提交
        layui.form.on('submit(addGoods)', function (data2) {
            var d = data2.field;
            $.ajax({
                    type: "get",
                    url: "toAddPicture",
                    data:{
                        "goodsid":d.goodsname,
                        "cover":cover,
                        "picture1":goods1,
                        "picture2":goods2,
                    },
                    success: function (data) {
                        if (data.msg == "添加成功") {
                            layer.msg(data.msg, {
                                time: 1000
                            }, function () {
                                window.location.href="goodspicture"
                            });
                        } else {
                            layer.msg(data.msg)
                        }
                    }
                });

            return false;
        });
    });

</script>

</body>

</html>